ぼっちになるぐらいならなんか手伝うよ…
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 20, 2021
[Jp/En/Fr] Coding night from Japan #DrHakase配信中 #REALITY https://t.co/gNlWOG5jJ2
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 20, 2021
あまりに簡単なのでTwitter上で中学生でもわかるぐらいの解説を書いてみたいと思いました。#WebXR
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 20, 2021
WebXR Device APIによるARアプリの構築に必要なもの
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 20, 2021
-GithubでClone
-ARCore対応Androidデバイス
-ARCoreインストール(Chrome が自動インストール)
-Google Chrome
-Web Server for Chrome拡張(もしくはお好みのサーバ)
-デバイスと開発環境を接続するUSB ケーブル
-テキストエディタ
これだけ!
つまり…
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 20, 2021
– Android Studioはなくても大丈夫
– Visual Studio Codeでもよき
– HTML、CSS、JavaScript、Chrome DevTools に関する基本的な知識
これならChromebookでもいけるかもしれんね!
Githubリポジトリはこちらhttps://t.co/JEedxmqbmO
ライセンスは Apache 2.0
ではプロジェクトの中身へ…
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 20, 2021
▶︎workshop/index.html
material componentsライブラリ, three.js, GLTFLoader.jsを使ってます。
<a>タグで[AR開始]ボタンを用意するだけ
▶︎workshop/app.js
WebXRサポートを問い合わせる。もしimmersive-arモードがない場合はエラー表示。
→Webサーバの設定をします
Web Server for Chrome機能拡張 にて`AR-WITH-WEBXR` (git clone したディレクトリ)を指定。
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 20, 2021
ローカルサーバが立ち上げられますので http://127.0.0.1:8887/workshop/ を開く。
chrome://inspect でChrome DevToolsにUSBデバッグが設定&接続されたAndroidデバイスが表示されているはず。
[Discover USB Devices]の項目でポートフォワード設定。実機→開発サーバの設定する場合、例えば [8887],[localhost:8887]として[Enable Port Forwarding]を☑️します。続いてDevToolsの[Remote Target](実機) の[Chrome][Open Tab with URL]にそのURL[http://127.0.0.1:8887/workshop/]を貼付してOpen
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 20, 2021
実機のChromeで該当のページが表示されます。
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 20, 2021
[inspect]を押すとDevToolsのウインドウにもその様子が表示されます(Unsupported Browserと出ている)
DevTools の[Sources]タブ[Page]でページツリーを表示させながらデバッグする。 pic.twitter.com/sSIcKv9JRN
workshop/app.js:22
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 20, 2021
WebXR サポートを問い合わせて[immersive-ar]モードがないときはエラーを表示。
await navigator.xr.isSessionSupported("immersive-ar");
この辺りの詳細はMozillaMDNに日本語ドキュメントありますhttps://t.co/uWbotYnSwB pic.twitter.com/k9lr3plUBb
app.js:36
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 20, 2021
WebXR Device APIへの接続を管理し、各フレームでのレンダリングを処理するコンテナクラス(初期コード)。
this.createXRCanvas(); でカメラの背景とバーチャルシーンを格納するキャンバス(Canvas)を作成(後述)、
await this.onSessionStarted();
すべての設定が完了したら、アプリを起動。 pic.twitter.com/wtKBjN0HvR
▶︎createXRCanvas()関数
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 20, 2021
canvas 要素を追加し、WebXR と互換性のある WebGL コンテキストを初期化します。 pic.twitter.com/UxyhZR7D1w
Appクラスの冒頭、activateXRに戻ってコメント解除
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 20, 2021
this.xrSession = await navigator.xr.requestSession("immersive-ar");
でセッションをリクエスト。
onSessionStartedでthree.jsのレンダラー、シーン、カメラを設定し、XRWebGLLayerをXRSessionにアタッチして、レンダリングループを開始します。 pic.twitter.com/vpgxZSIbVb
setupThreeJs()の初期コード。
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 20, 2021
WebGLRendererを含む、three.js固有のレンダリングコードの初期化。デモシーン、3Dコンテンツを見るためのカメラなどのレンダリングコードを初期化します。コメントアウト外すと色々あとで機能追加できるようになってます。 pic.twitter.com/hgS51LJakv
このままだと描画の中身がないので、onSessionStartedに戻ってonXRFrameのコールバックを作っていきます。
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 20, 2021
レンダリング待ち列に追加、フレームバッファをbaseLayerのフレームバッファにバインドして、トラッキングが成立したときに取得できるpose以降を書いていきます。
(サンプルのコメント外す) pic.twitter.com/0dcfxbKcA7
詳しくは画像に解説書いておきますが
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 20, 2021
1.ベースレイヤーのビューポートを取得して、そのサイズをレンダラーにセット。
2. https://t.co/s4uKIujOO7の設定に、ビューの変換行列(transform)と投影行列(projection)をセット。これで物理的カメラとバーチャルカメラが接続。
3. 最後にTHREE.WebGLRenderer pic.twitter.com/w5TGpZmLqe
ここまできたらリロードしましょう!
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 20, 2021
実機で AR が動いているのを見れるはずです(ケーブル短くていい絵が撮れなかった)。 pic.twitter.com/Cjcji0MwYj
実行結果のあたりは解説動画の[28:16](https://t.co/5gmQQiTNPf)。
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 20, 2021
続きは、当たり判定です!
が…もう遅いので寝ます!
せっかくなので動くWebARのシーンにしておきました
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 20, 2021
お手持ちのスマホでアクセスしてみて下さいhttps://t.co/KI0G0itMqY
(あとで消しちゃうかも?)
こんな感じでブラウザからXRアプリがうごくみたいー!https://t.co/UHPc2p3sr6 pic.twitter.com/NOHuZJUw4K
— muu (@muumuunimuu) May 20, 2021
ご視聴&動作テスト
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 20, 2021
ありがとうございます!
今日のお題目はこんな感じで https://t.co/SUWYcm00V2 pic.twitter.com/QDUSEn3FQ3
— ようてん (@youten_redo) May 20, 2021
MozillaWebXRでアクセスしたら
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 21, 2021
iPhoneでも動いた〜
が、ビューポート設定とかモーションとか謎挙動すぎる…
もしかしてカードボードになってるのかな??https://t.co/aQV2DfuwmT pic.twitter.com/nCYYkK2XKv
いちおう床認識とかも動いているっぽい。
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 21, 2021
FirefoxReality用にコード書き足さねばならんね…。 pic.twitter.com/tFKE0N6tBS
それはそれとして今日はXcodeと格闘してます。
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 21, 2021
Github EnterpriseをXcodeから利用すると意外と便利。
🔈エコーキャンセルが正式リリース🔈
— REALITY 公式 (@REALITY_app) May 21, 2021
コラボ時にイヤホンを使わなくても音の反響を防ぐことができる、「エコーキャンセル」を正式リリースしました🙆♂️
使用した感想をお知らせのアンケートフォームで募集しています。ぜひご協力お願いいたします!
詳細はこちら👇https://t.co/KupurJcr2J
MetaHuman Creatorの即時アクセスが可能になりました。
— アンリアルエンジン (@UnrealEngineJP) May 20, 2021
今までのようにお待ち頂く必要はありません。ログインしてすぐにMetaHuman Creatorに触れていただくことが可能です。https://t.co/1YbNYSAK2X#UE4 #MetaHumans pic.twitter.com/aXD6bVwQaV
またMetaHuman Creatorドキュメントページの日本語が公開されています。
— アンリアルエンジン (@UnrealEngineJP) May 20, 2021
こちらも合わせてご覧ください。https://t.co/7X0fhz978r#UE4 #MetaHumans
REALITY Androidにエコーキャンセルを導入した話|REALITY株式会社 #note https://t.co/WRv5sJlmwl
— niu / メタルおじさん(Composer, Arranger) (@niusounds) May 21, 2021
書きました
ちょっと頑張ればBig Sur無理に移行しなくてもいい
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 21, 2021
こういうところがMacOSでありLinux的で好きやわ
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport
Utopia on Mars via NASA https://t.co/pLp9FncnpR pic.twitter.com/od9A4hREU3
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 21, 2021
中学生でもできるとは……?って思いながら泪目で2時間くらいかかってサンプルうごかせたhttps://t.co/L3auGyoMZ9 pic.twitter.com/URHICQ2NEw
— muu (@muumuunimuu) May 21, 2021
iPhoneでもAndroidでも動くWebXRだったら2019年ぐらいからPlayCanvasでできちゃうんだよなあ・・・いわゆる画像タグだけど。
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 21, 2021
インストール不要なのは嬉しい
PlayCanvasで簡単に簡単なWebARコンテンツを作る! https://t.co/6KCiO2sSUu #Qiita @mxcn3より
ロゴかっこいいよね https://t.co/5tzA2JXiWT
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 21, 2021
調査にご協力よろしくお願いします!
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 21, 2021
まずは https://t.co/oAAA5Sp3Gf から https://t.co/fSfs2CwMF2
XR界隈、VRやARやBMIやWebXRや触覚が原点回帰する予感。
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 21, 2021
なんというか「非HMD」な技術群。
Twitchかな?
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 21, 2021
呼んでくれれば手伝うよ
Oculus Developer Hub (ODH) 1.8.0 リリースされてた
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 21, 2021
URL開くの便利になったhttps://t.co/9fIoY76YeZ
Firefox Reality, Mozilla Realityならちゃんと動くんだけどな…Oculusデフォルトブラウザもダメ。 pic.twitter.com/yZutcNJqGz
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 21, 2021
税率変わる貴族ボタンだ
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 21, 2021
HMD外したときにケーブルを椅子で踏んでいた時のショックってあるよね
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 21, 2021
めっちゃ長旅だった… https://t.co/J1iFNDvcBM
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 21, 2021
振り返ると今週めっちゃ仕事してる
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 21, 2021
若いインターンさんたちを育てていくの
尊いし付加価値しかない尊いやつ
そして自分自身は扱う技術分野が
メンターしてるインターンの数だけある
めっちゃ強まれる環境
というわけで今日はもうそろそろタイムカード切って週末モードに入る!
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 21, 2021
さて晩ご飯作る〜
と思ったら延長戦。
docker-compose up -d
しながら米炊いてる
えっちなことに使うんですね
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 21, 2021
私は知っているぞ
AIセバスちゃんでもそういう立体視に興味あるんだ
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 21, 2021
h指数高そうhttps://t.co/OOraPexEkh
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 21, 2021
デジハリ大学院より依頼 #DHGS
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 21, 2021
(シェア確認済)
2つの動画を見て印象を答えるだけの簡単な調査ですが、大変興味深い内容。
いろいろなことがわかります。
論文「エフェクト映像によるマーケティング効果の先行市場調査」のためのアンケートhttps://t.co/81ereOWqpn
(〆切:6/10)
終わった人は感想をそっと
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 21, 2021
ここに書いてもいい…
#麻婆豆腐鶏しお味
— Dr.(Shirai)Hakase – しらいはかせ (@o_ob) May 21, 2021
うまいですよ
辛くないし https://t.co/uU1NbZagzG pic.twitter.com/dB0r5R6f3t
@yukihiko_a ぼっちになるぐらいならなんか手伝うよ… in reply to yukihiko_a
[Jp/En/Fr] Coding night from Japan #DrHakase配信中 #REALITY https://t.co/gNlWOG5jJ2
あまりに簡単なのでTwitter上で中学生でもわかるぐらいの解説を書いてみたいと思いました。 #WebXR in reply to o_ob
WebXR Device APIによるARアプリの構築に必要なもの -GithubでClone -ARCore対応Androidデバイス -ARCoreインストール(Chrome が自動インストール) -Google Chrome… https://t.co/fdkP8E6CdH in reply to o_ob
つまり… – Android Studioはなくても大丈夫 – Visual Studio Codeでもよき – HTML、CSS、JavaScript、Chrome DevTools に関する基本的な知識 これならChrom… https://t.co/n2YajTt6KX in reply to o_ob
ではプロジェクトの中身へ… ▶︎workshop/index.html material componentsライブラリ, three.js, GLTFLoader.jsを使ってます。 <a>タグで[AR開始]ボタンを用意するだけ… https://t.co/9Fz1hsrkjL in reply to o_ob
Web Server for Chrome機能拡張 にて`AR-WITH-WEBXR` (git clone したディレクトリ)を指定。 ローカルサーバが立ち上げられますので http://127.0.0.1:8887/works… https://t.co/di0IstLtLW in reply to o_ob
[Discover USB Devices]の項目でポートフォワード設定。実機→開発サーバの設定する場合、例えば [8887],[localhost:8887]として[Enable Port Forwarding]を☑️します。続… https://t.co/es9LfBQmGN in reply to o_ob
実機のChromeで該当のページが表示されます。 [inspect]を押すとDevToolsのウインドウにもその様子が表示されます(Unsupported Browserと出ている) DevTools の[Sources]タブ[… https://t.co/o59wLw9XAD in reply to o_ob
workshop/app.js:22 WebXR サポートを問い合わせて[immersive-ar]モードがないときはエラーを表示。 await navigator.xr.isSessionSupported("immersiv… https://t.co/Jxp6si4Xss in reply to o_ob
app.js:36 WebXR Device APIへの接続を管理し、各フレームでのレンダリングを処理するコンテナクラス(初期コード)。 this.createXRCanvas(); でカメラの背景とバーチャルシーンを格納するキ… https://t.co/V6b8ElvLqI in reply to o_ob
▶︎createXRCanvas()関数 canvas 要素を追加し、WebXR と互換性のある WebGL コンテキストを初期化します。 https://t.co/UxyhZR7D1w in reply to o_ob
Appクラスの冒頭、activateXRに戻ってコメント解除 this.xrSession = await navigator.xr.requestSession("immersive-ar"); でセッションをリクエスト。 on… https://t.co/UsHWKspjaV in reply to o_ob
setupThreeJs()の初期コード。 WebGLRendererを含む、three.js固有のレンダリングコードの初期化。デモシーン、3Dコンテンツを見るためのカメラなどのレンダリングコードを初期化します。コメントアウト外す… https://t.co/pUVE8jgvS5 in reply to o_ob
このままだと描画の中身がないので、onSessionStartedに戻ってonXRFrameのコールバックを作っていきます。 レンダリング待ち列に追加、フレームバッファをbaseLayerのフレームバッファにバインドして、トラッキ… https://t.co/CitHtHbijg in reply to o_ob
詳しくは画像に解説書いておきますが 1.ベースレイヤーのビューポートを取得して、そのサイズをレンダラーにセット。 2. https://t.co/s4uKIujOO7の設定に、ビューの変換行列(transform)と投影行列(pr… https://t.co/ZZAwjOtjGx in reply to o_ob
ここまできたらリロードしましょう! 実機で AR が動いているのを見れるはずです(ケーブル短くていい絵が撮れなかった)。 https://t.co/Cjcji0MwYj in reply to o_ob
実行結果のあたりは解説動画の[28:16]( https://t.co/5gmQQiTNPf )。 続きは、当たり判定です! が…もう遅いので寝ます! in reply to o_ob
せっかくなので動くWebARのシーンにしておきました お手持ちのスマホでアクセスしてみて下さい https://t.co/KI0G0itMqY (あとで消しちゃうかも?) in reply to o_ob
RT @muumuunimuu: こんな感じでブラウザからXRアプリがうごくみたいー! https://t.co/UHPc2p3sr6 https://t.co/NOHuZJUw4K
@muumuunimuu ご視聴&動作テスト ありがとうございます! in reply to muumuunimuu
RT @youten_redo: 今日のお題目はこんな感じで https://t.co/SUWYcm00V2 https://t.co/QDUSEn3FQ3
MozillaWebXRでアクセスしたら iPhoneでも動いた〜 が、ビューポート設定とかモーションとか謎挙動すぎる… もしかしてカードボードになってるのかな?? https://t.co/aQV2DfuwmT https://t.co/nCYYkK2XKv in reply to o_ob
いちおう床認識とかも動いているっぽい。 FirefoxReality用にコード書き足さねばならんね…。 https://t.co/tFKE0N6tBS in reply to o_ob
それはそれとして今日はXcodeと格闘してます。 Github EnterpriseをXcodeから利用すると意外と便利。
RT @REALITY_app: 🔈エコーキャンセルが正式リリース🔈 コラボ時にイヤホンを使わなくても音の反響を防ぐことができる、「エコーキャンセル」を正式リリースしました🙆♂️ 使用した感想をお知らせのアンケートフォームで募集しています。ぜひご協力お願いいたします! 詳…
RT @UnrealEngineJP: MetaHuman Creatorの即時アクセスが可能になりました。 今までのようにお待ち頂く必要はありません。ログインしてすぐにMetaHuman Creatorに触れていただくことが可能です。 https://t.co/1YbNYSA…
RT @UnrealEngineJP: またMetaHuman Creatorドキュメントページの日本語が公開されています。 こちらも合わせてご覧ください。 https://t.co/7X0fhz978r #UE4 #MetaHumans
RT @niusounds: REALITY Androidにエコーキャンセルを導入した話|REALITY株式会社 #note https://t.co/WRv5sJlmwl 書きました
ちょっと頑張ればBig Sur無理に移行しなくてもいい こういうところがMacOSでありLinux的で好きやわ /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport in reply to o_ob
Utopia on Mars via NASA https://t.co/pLp9FncnpR https://t.co/od9A4hREU3
RT @muumuunimuu: 中学生でもできるとは……?って思いながら泪目で2時間くらいかかってサンプルうごかせた https://t.co/L3auGyoMZ9 https://t.co/URHICQ2NEw
iPhoneでもAndroidでも動くWebXRだったら2019年ぐらいからPlayCanvasでできちゃうんだよなあ・・・いわゆる画像タグだけど。 インストール不要なのは嬉しい PlayCanvasで簡単に簡単なWebARコン… https://t.co/DBBPR1qohL
ロゴかっこいいよね https://t.co/5tzA2JXiWT
調査にご協力よろしくお願いします! まずは https://t.co/oAAA5Sp3Gf から https://t.co/fSfs2CwMF2
XR界隈、VRやARやBMIやWebXRや触覚が原点回帰する予感。 なんというか「非HMD」な技術群。
@Gao80840 Twitchかな? 呼んでくれれば手伝うよ in reply to Gao80840
Oculus Developer Hub (ODH) 1.8.0 リリースされてた URL開くの便利になった https://t.co/9fIoY76YeZ
Firefox Reality, Mozilla Realityならちゃんと動くんだけどな…Oculusデフォルトブラウザもダメ。 https://t.co/yZutcNJqGz in reply to o_ob
@AmeJi 税率変わる貴族ボタンだ in reply to AmeJi
HMD外したときにケーブルを椅子で踏んでいた時のショックってあるよね
めっちゃ長旅だった… https://t.co/J1iFNDvcBM
振り返ると今週めっちゃ仕事してる 若いインターンさんたちを育てていくの 尊いし付加価値しかない尊いやつ そして自分自身は扱う技術分野が メンターしてるインターンの数だけある めっちゃ強まれる環境
というわけで今日はもうそろそろタイムカード切って週末モードに入る! さて晩ご飯作る〜 と思ったら延長戦。 docker-compose up -d しながら米炊いてる
@SebasAi えっちなことに使うんですね 私は知っているぞ in reply to SebasAi
@SebasAi AIセバスちゃんでもそういう立体視に興味あるんだ in reply to o_ob
@SebasAi h指数高そう https://t.co/OOraPexEkh in reply to SebasAi
デジハリ大学院より依頼 #DHGS (シェア確認済) 2つの動画を見て印象を答えるだけの簡単な調査ですが、大変興味深い内容。 いろいろなことがわかります。 論文「エフェクト映像によるマーケティング効果の先行市場調査」のためのア… https://t.co/QWEAfIODxl
終わった人は感想をそっと ここに書いてもいい… in reply to o_ob
#麻婆豆腐鶏しお味 うまいですよ 辛くないし https://t.co/uU1NbZagzG https://t.co/dB0r5R6f3t